import React, { Component } from 'react';
import { Scroller, Touchable, Rating ,Dialog} from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
import './index.scss';
//引入一个list的组件
import { List } from '$yo-component';



class Skill extends Component {

    constructor(getData) {
        super(getData);
        this.state = {
            getData:[
                {key:1}
            ],
            show:false
        };
    }
    componentDidMount() {
        fetch('http://oyodho8ih.bkt.clouddn.com/db/dbSkill2.json')
            .then((response)=> {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json();
            })
            .then((stories)=> {
                const getData = stories;
                this.setState({
                    getData
                })
            });
    }
        

    render() {
        function showhtml(record){
            var html = {__html:record.star};
            return   <div dangerouslySetInnerHTML={html}></div> ;
        }
        let guid = -1;
        return (
            <div className="yo-flex">
                <Dialog
                    show={this.state.show}
                    title="聊我"
                    onOk={() =>{
                        this.setState({
                            show:false
                        })
                    }}
                    onCancel={() => {
                        this.setState({
                            show:false
                        })
                    }}
                    animation={{animation: ['actionsheet-up', 'actionsheet-down'], duration: 200}}
                >
                    <p>想聊我，就加我微信：YMC908623375;或者直接电话骚扰吧：17879838199</p>
                </Dialog>
                <Header title="掌握-技能" right={{ title: '撩我', onTap: () => {
                    this.setState({
                        show:true
                    })
                } }}/>
                {/*中间滚动的履历栏目*/}
                <Scroller extraClass="flex"
                            ref='list'
                            usePullRefresh={true}
                            onRefresh={() => {
                                setTimeout(() => {
                                //  this.refresh();
                                    this.refs.list.stopRefreshing(true);
                                }, 500);
                            }}
                            useLoadMore={true}
                            onLoad={() => {
                                setTimeout(() => {
                                //  this.fetch();
                                    this.refs.list.stopLoading(true);
                                }, 500);
                            }}
                >
                    {/*前言*/}
                    <div className="yo-card my-card">
                        <h3 className="hd">编者注：</h3>
                        <div className="bd">入坑前端，已经有几年了，了解了一些规范H4/H5/C2/C3/E5/E6/AMD/CMD/COMMONJS等；掌握了解的一些技术，框架，插件以及类库；对现代开发技术也有一定的了解，webpack，gulp，这样的前端自动构建化工具特别好用，vue、React、angularjs熟悉了解；最近被安利了vscode，你是用什么编辑器的呢？面对不断壮大，野蛮生长的前端疾风，只能默默学习（苦逼脸）</div>
                        <div className="ft">
                            <span className="link">赞</span>
                            <span className="link">详情</span>
                        </div>
                    </div>
                {/*掌握技能*/}
                    <List
                        dataSource={this.state.getData}
                        renderItem={(item,i)=>{
                            return (
                                <div className="yo-card my-cardBox">
                                
                                    <h3 className="hd">
                                        <span style={{fontWeight:'700'}}>
                                        <i className="iconfont" style={{marginRight:".05rem"}}>&#xe600;</i>
                                        {item.mainTitle}</span>
                                    </h3>
                                    {
                                        item.children?
                                        item.children.map((children,i)=>{
                                            return(
                                                [<div key={i} className="bd cols">
                                                    <img className="img-cover" src={children.img} alt="示例图片" />
                                                    <div className="flex">
                                                        <h4 className="title">{children.title}</h4>
                                                        <p className="desc">{children.detail}</p>
                                                    </div>
                                                </div>,
                                                <div className="ft" style={{boxShadow:"0 0 .005rem #000"}}>
                                                    综合自评：
                                                    <Rating
                                                        value={children.star}
                                                        readonly={true}
                                                    />
                                                    <span>{children.star} 星</span>
                                                </div>]
                                        )
                                        }):
                                        console.log("异步获取失败")
                                    }
                                </div>
                    
                            );
                        }}
                    />
                      
                    
                </Scroller>
                {/*//底部导航tab*/}
                <Footer indexLink='false'indexLink2='true' indexLink3='false' indexLink4='false' />
            </div>
        )
    }
}

export default Skill;
